<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script src='/js/vue.js'></script>
    <div id='app'>
        <!-- 用到v-for时
            官方推荐我们用v-for时 绑定一个key属性，key的作用是高效的更新虚拟DOM元素
        
        -->
        <ul>
            <li v-for="item in items" :key="item"></li>
        </ul>

        <!-- 数组的响应  vue是响应式，data发生变化时，vue自动检测变化，然后视图进行渲染 -->


        <button @click="btnClick()">button</button>
        <p>{{msg}}</p>
    </div>
<br>
    <script>
        let app = new Vue({
            el:'#app',
            data:{
                msg:'hello word',
                items:[1,2,3],
                name:['A','B','C','D']
            },
            methods:{
                btnClick(){
                    //数组响应式
                    //通过下标形式进行改变，不是响应式，无法自动触发渲染
                    // this.name[0] = "Shane",


                    //数组的响应
                    //1.push方法 在数组末尾添加元素
                    //2.pop方法 在数组末尾删除元素
                    //3.shift方法 在数组开头删除元素
                    //4.unshift方法 在数组开头增加元素
                    //5.splice方法（删除、添加、替换）
                    // splice(开始的下标，删除个数，追加后面的元素)
                    this.name.splice(0,1,"shane")

                    // ... 扩展符
                    //可变参数
                    let total = 0
                    function sum(...item){
                        //es6
                        // for(let i = 0; i<item.length;i++){
                        //     total += item[i]
                        // }

                        //es6 for in 拿出来的是下标
                        for(i in item){
                            total += item[i]
                        }
                        //for of 拿出来的就是值
                        for(i of item){
                            total += 1
                        }

                        return total
                    }
                    console.log(sum(1,2,3,4))

                    //sort()排序
                    //reverse() 到着排序

                    //对于数组 Vue本身提供了一个很强的方法,提供了set方法，可以修改元素（要修改的元素，索引）
                    Vue.set(this.name,1,Kitty)//在vue中还是比较常用的  响应式 可以直接修改数组



                }
            },

        })
    </script>
</body>
</html>